<template>
  <div class="etzy">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">{{ info.residentName }}</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：{{ info.idNo }}</span
      >
      <span>填表人：肖汉琪</span>
    </p>
    <div class="box">
      <span>月龄：</span>
      <el-input
        size="small"
        style="width: 200px"
        v-model="info.birthMonth"
      ></el-input>
    </div>
    <div class="box">
      <span>随访日期：</span>
      <el-date-picker
        v-model="info.visitDate"
        align="right"
        type="date"
        placeholder="选择随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span style=""
        >中医药健康管理服务：</span
      >
      <el-checkbox-group
        v-model="info.visitGuidance"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="中医饮食调养指导"
          value="1"
        ></el-checkbox>
        <el-checkbox
          label="中医起居调摄指导"
          value="2"
        ></el-checkbox>
        <el-checkbox
          label="传授摩腹、捏脊方法"
          value="3"
        ></el-checkbox>
        <el-checkbox label="其他" value="4"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.visitGuidanceOther"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span>下次随访日期：</span>
      <el-date-picker
        v-model="info.nextDate"
        align="right"
        type="date"
        placeholder="选择下次随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>医疗机构名称及医生签名：</span>
      <el-select
        filterable
        placeholder="请选择医疗机构名称及医生"
        size="small"
        style="width: 200px"
        v-model="info.createUnitId"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        filterable
        placeholder="请选择医疗机构名称及医生签名"
        size="small"
        style="width: 200px; margin-left: 20px"
        v-model="info.respDoctorId"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="box">
      <span>随访照片：</span>
      <el-button
        icon="el-icon-upload2"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >本地上传文件</el-button
      >
      <el-button
        icon="el-icon-picture-outline"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >加载手机图片</el-button
      >
      <p style="margin-top: 10px">
        扫描二维码，在手机端点击"上传"图片，在手机端上传后，点击上方"加载手机照片"按钮，即可同步到电脑端
      </p>
      <div>
        <img
          style="width: 100px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
        <img
          style="width: 100px; margin-left: 20px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
        
        <script>
export default {
  data() {
    return {
      info: {
        中医药健康管理服务: [],
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
    };
  },
};
</script>
        
        <style scoped lang="scss">
.etzy {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
</style>